<form name="settlementForm">
	<div class="settlement" ng-init="vm.init()" fs-aside>
		<table>
			<tr>
				<td width="50%"><div class="panel-heading font-bold">{{"title.settlement.init." + vm.settlement.settlementInfo.parentType.toLowerCase() | translate}}</div></td>
				<td width="50%"><div class="panel-heading font-bold pull-right">
				{{"label.settlement." + vm.settlement.settlementInfo.parentType.toLowerCase() + ".parentid" | translate}} : {{vm.settlement.settlementInfo.parentId}}
				</div></td>
			</tr>
		</table>
		<fs-buttons fs-buttons-config="vm.layoutConfig.buttonConfigs.buttonGroup"></fs-buttons>
		<br>
		<fs-grid-layout ng-model="vm.settlement" fs-config="vm.generalConfig" fs-validator-config="vm.validatorConfig"></fs-grid-layout>
		<div class="cursor panel-heading font-bold" ng-click="isCollapsed_txnsetlinsts=!isCollapsed_txnsetlinsts">
			<table>
				<tr>
					<td><div class="pull-right">{{"label.settlement.title.txnsetlinst" | translate}}</div></td>
					<td><i class="pull-right glyphicon glyphicon-chevron-right" ng-class="{'glyphicon-chevron-down': isCollapsed_txnsetlinsts, 'glyphicon-chevron-right': !isCollapsed_txnsetlinsts}"></i></td>
				</tr>
			</table>
		</div>	
		<div uib-collapse="!isCollapsed_txnsetlinsts">
			<fs-table fs-config="vm.txnSetlInsts"></fs-table>
		</div>		
		<div class="panel-heading font-bold">{{"label.settlement.title.settlementsummarypaydetail" | translate}}</div>
		<fs-table fs-config="vm.payDetailConfig"></fs-table>
		
		<div class="panel-heading font-bold">{{"label.settlement.init.pay" | translate}}</div>
		
		<div>
			<table>
				<tr>
					<td width="3%"><div class="ui-grid-top-panel settlement-btn"><fs-grid fs-grid-config="vm.setlDetailsPayConfig[8]"/></td>
					<td width="10%"><div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus ui-grid-top-panel">{{"label.settlement.init.itemtype" | translate}}</div></td>
					<td width="24%"><div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus ui-grid-top-panel">{{"label.settlement.init.description" | translate}}</div></td>
					<td width="12%"><div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus ui-grid-top-panel">{{"label.settlement.init.itemccy" | translate}}</div></td>
					<td width="18%"><div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus ui-grid-top-panel">{{"label.settlement.init.itemamt" | translate}}</div></td>
					<td width="18%"><div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus ui-grid-top-panel">{{"label.settlement.init.alloccode" | translate}}</div></td>
					<td width="10%"><div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus ui-grid-top-panel">{{"label.settlement.init.paydetailseq" | translate}}</div></td>
					<td width="5%"><div  class="ui-grid-cell-contents ui-grid-header-cell-primary-focus ui-grid-top-panel">&nbsp;</div></td>
				</tr>
				<tr ng-repeat="item in vm.settlement.setlDetails track by $index">
					<td ng-if="vm.isDetailsPay(item)" colspan="8">
						<table border="0" cellspacing="0" cellpadding="0" width="100%">
							<tr>
								<td class="settlement-btn" width="3%" ng-if="vm.isShowSplit(item)"><fs-grid ng-click="vm.splitbox(item)" ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[0]"/></td>
								<td class="settlement-btn" width="3%" ng-if="vm.isShowDeleteItem(item)"><fs-grid ng-click="vm.deleteItem(item)" ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[1]"/></td>
								<td class="settlement-btn" width="3%" ng-if="!vm.isShowSplit(item) && !vm.isShowDeleteItem(item)">&nbsp;</td>
								<td class="content" width="10%"><fs-grid ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[2]"/></td>
								<td class="content" width="24%"><fs-grid ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[3]"/></td>
								<td class="content" width="12%"><fs-grid ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[4]"/></td>
								<td class="content" width="18%"><fs-grid ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[5]"/></td>
								<td class="content" width="18%"><fs-grid ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[6]"/></td>
								<td class="content" width="10%"><fs-grid ng-show="vm.isShowPaydetailSeq(item)" ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[7]"/></td>
								<td class="settlement-btn" width="5%" ng-click="isCollapsed=!isCollapsed"><i class="pull-right glyphicon glyphicon-chevron-right" ng-class="{'glyphicon-chevron-down': isCollapsed, 'glyphicon-chevron-right': !isCollapsed}"></i></td>
							</tr>
							<tr uib-collapse="!isCollapsed">
								<td width="3%" ng-if="vm.isShowAmountItem(item)"><fs-grid ng-click="vm.changeAmountBox(item)" ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[10]"/></td>
								<td width="3%" ng-if="!vm.isShowAmountItem(item)">&nbsp;</td>
								<td width="97%" colspan="7">
									<fs-grid-layout ng-model="item" fs-config="item.setlDetailConfig"></fs-grid-layout>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>
		
		
		<div class="panel-heading font-bold">{{"label.settlement.init.receive" | translate}}</div>
		
		<div>
			<table>
				<tr>
					<td width="3%"><div class="ui-grid-top-panel settlement-btn"><fs-grid fs-grid-config="vm.setlDetailsPayConfig[9]"/></td>
					<td width="10%"><div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus ui-grid-top-panel">{{"label.settlement.init.itemtype" | translate}}</div></td>
					<td width="24%"><div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus ui-grid-top-panel">{{"label.settlement.init.description" | translate}}</div></td>
					<td width="12%"><div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus ui-grid-top-panel">{{"label.settlement.init.itemccy" | translate}}</div></td>
					<td width="18%"><div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus ui-grid-top-panel">{{"label.settlement.init.itemamt" | translate}}</div></td>
					<td width="18%"><div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus ui-grid-top-panel">{{"label.settlement.init.alloccode" | translate}}</div></td>
					<td width="10%"><div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus ui-grid-top-panel">{{"label.settlement.init.paydetailseq" | translate}}</div></td>
					<td width="5%"><div  class="ui-grid-cell-contents ui-grid-header-cell-primary-focus ui-grid-top-panel">&nbsp;</div></td>
				</tr>
				<tr ng-repeat="item in vm.settlement.setlDetails track by $index">
					<td ng-if="vm.isDetailsReceive(item)" colspan="8">
						<table>
							<tr>
								<td class="settlement-btn" width="3%" ng-if="vm.isShowSplit(item)"><fs-grid ng-click="vm.splitbox(item)" ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[0]"/></td>
								<td class="settlement-btn" width="3%" ng-if="vm.isShowDeleteItem(item)"><fs-grid ng-click="vm.deleteItem(item)" ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[1]"/></td>
								<td class="settlement-btn" width="3%" ng-if="!vm.isShowSplit(item) && !vm.isShowDeleteItem(item)">&nbsp;</td>
								<td class="content" width="10%"><fs-grid ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[2]"/></td>
								<td class="content" width="24%"><fs-grid ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[3]"/></td>
								<td class="content" width="12%"><fs-grid ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[4]"/></td>
								<td class="content" width="18%"><fs-grid ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[5]"/></td>
								<td class="content" width="18%"><fs-grid ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[6]"/></td>
								<td class="content" width="10%"><fs-grid ng-show="vm.isShowPaydetailSeq(item)" ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[7]"/></td>
								<td class="settlement-btn" width="5%" ng-click="isCollapsed=!isCollapsed"><i class="pull-right glyphicon glyphicon-chevron-right" ng-class="{'glyphicon-chevron-down': isCollapsed, 'glyphicon-chevron-right': !isCollapsed}"></i></td>
							</tr>
							<tr uib-collapse="!isCollapsed">
								<td width="3%" ng-if="vm.isShowAmountItem(item)"><fs-grid ng-click="vm.changeAmountBox(item)" ng-model="item" fs-grid-config="vm.setlDetailsPayConfig[10]"/></td>
								<td width="3%" ng-if="!vm.isShowAmountItem(item)">&nbsp;</td>
								<td width="97%" colspan="7">
									<fs-grid-layout ng-model="item" fs-config="item.setlDetailConfig"></fs-grid-layout>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>
	</div>	
</form>
